<div class="modal-header"> 
  <h3 class="modal-title">Configure Video</h3> 
</div> 
<form class="form-horizontal" name="configForm" data-ng-submit="configForm.$valid && $close()">
  <ng-include src="'partials/configure-cue-partials.html'"></ng-include>
  <div class="modal-body">
    <div class="form-group" data-ng-class="{'has-error': configForm.gain.$invalid}">
      <label for="configGain" class="col-sm-2 control-label">Gain</label>
      <div class="col-sm-10">
        <input type="text" class="form-control input-sm" id="configGain" placeholder="Blank for default" name="gain"
          data-cuefloat data-ng-model="config.gain">
      </div>
    </div>
    <div class="form-group" data-ng-class="{'has-error': configForm.opacity.$invalid}">
      <label for="configOpacity" class="col-sm-2 control-label">Opacity</label>
      <div class="col-sm-10 form-inline">
        <input type="text" class="form-control input-sm" id="configOpacity" name="opacity" placeholder="Blank for default"
          data-cuefloat data-ng-model="config.opacity">
        </span>
      </div>
    </div>
    <div class="form-group" data-ng-class="{'has-error': configForm.delay.$invalid}">
      <label for="configDelay" class="col-sm-2 control-label">Delay</label>
      <div class="col-sm-10">
        <input type="text" class="form-control input-sm" id="configDelay" name="delay" placeholder="Blank for default"
          data-cuefloat data-ng-model="config.delay">
        </span>
      </div>
    </div>
    <div class="form-group" data-ng-class="{'has-error': configForm.width.$invalid || configForm.height.$invalid}">
      <label for="configWidth" class="col-sm-2 control-label">Size W*H</label>
      <div class="col-sm-10 form-inline">
        <div class="input-group input-group-sm">
          <input type="text" class="form-control input-sm" id="configWidth" name="width" placeholder="Blank for default"
            data-cuefloat-percent data-ng-model="config.width">
          <input type="text" class="form-control input-sm" id="configHeight" name="height" placeholder="Blank for default"
            data-cuefloat-percent data-ng-model="config.height">
        </div>
      </div>
    </div>
    <div class="form-group" data-ng-class="{'has-error': configForm.positionMy.$invalid}">
      <label for="configPositionMy" class="col-sm-2 control-label">Position My</label>
      <div class="col-sm-10">
        <input type="text" class="form-control input-sm" id="configPositionMy" name="positionMy" placeholder="Blank for default"
          data-position-string data-ng-model="config.positionMy">
      </div>
    </div>
    <div class="form-group" data-ng-class="{'has-error': configForm.positionAt.$invalid}">
      <label for="configPositionAt" class="col-sm-2 control-label">Position At</label>
      <div class="col-sm-10">
        <input type="text" class="form-control input-sm" id="configPositionAt" name="positionAt" placeholder="Blank for default"
          data-position-string data-ng-model="config.positionAt">
      </div>
    </div>
    <div class="form-group" data-ng-class="{'has-error': configForm.style.$invalid}">
      <label for="configStyle" class="col-sm-2 control-label">Style</label>
      <div class="col-sm-10">
        <textarea type="text" class="form-control" id="configStyle" name="style" placeholder="Blank to ignore" rows="5"
          data-ng-model="config.style">
        </textarea>
        <p class="help-block">$ID$ will be replaced with the active element's id</p>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox" id="configAllowOverlap" data-ng-model="config.allowOverlap">
            Allow overlap?
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox" id="configDoNotRemoveAtTheEnd" data-ng-model="config.doNotRemoveAtTheEnd">
            Do not remove at the end
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-primary" value="Ok" data-ng-disabled="!configForm.$valid">
  </div>
</form>


